<template>
    <div class="content">
        <div class="checkType" v-if="!type">
            <div class="entrances">
                <div
                    class="entrance border"
                    v-for="item in entrances"
                    :key="item.id"
                >
                    <img class="entrance-icon" :src="item.img" />
                    <div class="entrance-text">
                        <div class="entrance-title">
                            {{ item.title }}
                        </div>
                        <div class="entrance-desc">{{ item.desc }}</div>
                        <span
                            type="primary"
                            @click="entrance(item.type)"
                            class="link"
                        >
                            创建项目
                            <span class="link-arrow">→</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="editStep" v-else>
            <el-button
                size="small"
                type="primary"
                @click="returnList()"
                v-if="actuveStep < 6"
                >返回列表</el-button
            >
            <el-steps :active="actuveStep" align-center class="steps">
                <el-step title="创建项目"></el-step>
                <el-step title="导入素材"></el-step>
                <el-step title="训练模型"></el-step>
                <el-step title="模型评估结果"></el-step>
                <!-- <el-step title="部署模型"></el-step> -->
            </el-steps>
            <el-row :gutter="20" style="margin-top: 30px" v-loading="loading">
                <el-col :span="20" :offset="2">
                    <div class="grid-content bg-purple">
                        <div v-if="actuveStep === 0">
                            <el-form
                                :model="baseinfo"
                                :rules="rules"
                                ref="baseFrom"
                                label-width="100px"
                                class="demo-ruleForm"
                            >
                                <el-form-item
                                    label="项目名称"
                                    prop="projectName"
                                >
                                    <el-input
                                        v-model.trim="baseinfo.projectName"
                                        placeholder="请输入项目名称"
                                        showMaxLimit
                                        :maxlength="50"
                                        clearable
                                    ></el-input>
                                </el-form-item>

                                <el-form-item
                                    label="项目描述"
                                    prop="projectDesc"
                                >
                                    <el-input
                                        type="textarea"
                                        v-model.trim="baseinfo.projectDesc"
                                        :autosize="{ minRows: 5, maxRows: 10 }"
                                        placeholder="请输入项目描述"
                                        showMaxLimit
                                        :maxlength="200"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <div class="text-align-center">
                                        <el-button
                                            type="primary"
                                            @click="submitForm"
                                            >下一步</el-button
                                        >
                                    </div>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div v-if="actuveStep === 1" class="step-content">
                            <div v-show="!hasSelectFile">
                                <el-radio-group
                                    v-model="actionType"
                                    size="small"
                                >
                                    <el-radio-button label="upload"
                                        >文件上传</el-radio-button
                                    >
                                    <el-radio-button label="select"
                                        >我的数据集</el-radio-button
                                    >
                                </el-radio-group>
                                <div v-show="actionType === 'upload'">
                                    <new-data-list
                                        :call-back="setDataRecord"
                                        :data-type="baseinfo.projectType"
                                    />
                                </div>
                                <div v-show="actionType === 'select'">
                                    <select-data-list
                                        :call-back="setDataRecord"
                                        :data-type="baseinfo.projectType"
                                    />
                                </div>
                            </div>
                            <div v-show="hasSelectFile">
                                <show-data-list
                                    :form.sync="materialFormData"
                                    :call-back="saveProAndData"
                                    :set-has-select-file="
                                        () => {
                                            this.hasSelectFile = false;
                                        }
                                    "
                                />
                            </div>
                        </div>
                        <div v-if="actuveStep === 2">
                            <el-form
                                :model="trainFormData"
                                :rules="trainRules"
                                ref="traininfo"
                                style="padding-left: 10%"
                                label-width="100px"
                                class="demo-ruleForm"
                            >
                                <el-form-item
                                    label="数据集名称"
                                    prop="fileName"
                                >
                                    <el-input
                                        v-model="trainFormData.fileName"
                                        class="form-input"
                                        disabled
                                    ></el-input>
                                    <el-button
                                        @click="setShowViewFile"
                                        size="medium"
                                        v-if="
                                            [
                                                'data_predict',
                                                'txt_classify',
                                                'data_unsupervised'
                                            ].includes(baseinfo.projectType)
                                        "
                                    >
                                        预览
                                    </el-button>
                                </el-form-item>
                                <el-form-item
                                    label="模型类型"
                                    prop="algorithmClass"
                                >
                                    <el-select
                                        v-model="trainFormData.algorithmClass"
                                    >
                                        <el-option
                                            v-for="(item,
                                            i) in algorithmClassList"
                                            :key="i"
                                            :label="item"
                                            :value="item"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="算法名称"
                                    prop="algorithmName"
                                >
                                    <el-select
                                        v-model="trainFormData.algorithmName"
                                        @change="changeAlgorithm"
                                    >
                                        <el-option
                                            v-for="(item, i) in algorithmSelect"
                                            :key="i"
                                            :label="item.algorithmName"
                                            :value="item.algorithmName"
                                        />
                                    </el-select>
                                </el-form-item>
                                <!-- 还有当模型类型选择“聚类”和“关联规则”时，去掉标签列 -->
                                <el-form-item
                                    label="标签列"
                                    prop="targetColumn"
                                    key="targetColumn"
                                    v-if="
                                        [
                                            'data_predict',
                                            'txt_classify'
                                        ].includes(baseinfo.projectType) &&
                                            ['聚类', '关联规则'].indexOf(
                                                trainFormData.algorithmClass
                                            ) === -1
                                    "
                                >
                                    <el-select
                                        v-model="trainFormData.targetColumn"
                                    >
                                        <el-option
                                            v-for="(item, i) in targetList"
                                            :key="i"
                                            :label="item"
                                            :value="item"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="自变量"
                                    prop="variableName"
                                    v-if="
                                        [
                                            'data_predict',
                                            'data_unsupervised'
                                        ].includes(baseinfo.projectType)
                                    "
                                >
                                    <el-select
                                        v-model="trainFormData.variableName"
                                        multiple
                                        collapse-tags
                                    >
                                        <el-option
                                            v-for="(item,
                                            i) in variablefilterList"
                                            :key="i"
                                            :label="item"
                                            :value="item"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>

                                <!-- 所有类型，添加算法参数 -->
                                <el-form-item
                                    :required="true"
                                    label="算法参数"
                                    key="parameter"
                                >
                                    <el-button
                                        type="primary"
                                        size="small"
                                        @click="openParameter"
                                        >编辑</el-button
                                    >
                                </el-form-item>

                                <el-form-item
                                    label="训练集占比"
                                    prop="proportion"
                                >
                                    <el-select
                                        v-model="trainFormData.proportion"
                                    >
                                        <el-option
                                            label="50%"
                                            value="0.5"
                                        ></el-option>
                                        <el-option
                                            label="60%"
                                            value="0.6"
                                        ></el-option>
                                        <el-option
                                            label="70%"
                                            value="0.7"
                                        ></el-option>
                                        <el-option
                                            label="80%"
                                            value="0.8"
                                        ></el-option>
                                        <el-option
                                            label="90%"
                                            value="0.9"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label-width="0px"
                                    v-show="showViewFile"
                                >
                                    <table class="table-text">
                                        <thead>
                                            <tr>
                                                <th
                                                    v-for="(item, i) in vfTh"
                                                    :key="i"
                                                >
                                                    <div
                                                        :title="item"
                                                        class="cursor-pointer"
                                                    >
                                                        {{ showText(item) }}
                                                    </div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr
                                                v-for="(item, i) in vfData"
                                                :key="i"
                                            >
                                                <td
                                                    v-for="(it, j) in item"
                                                    :key="j"
                                                >
                                                    <div
                                                        :title="it"
                                                        class="cursor-pointer"
                                                    >
                                                        {{ showText(it) }}
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </el-form-item>
                                <el-form-item>
                                    <el-button
                                        type="primary"
                                        @click="saveTraining"
                                        >开始训练</el-button
                                    >
                                </el-form-item>
                            </el-form>
                        </div>
                        <div v-if="actuveStep === 3">
                            <div class="text-align-center">评估结果</div>
                            <model-results :data-list="modelResults" />
                            <div class="text-align-center">
                                <el-button
                                    type="primary"
                                    size="small"
                                    @click="toRelease"
                                    >发布模型</el-button
                                >
                            </div>
                        </div>
                        <!-- <div v-if="actuveStep === 4">

                          <div class="text-align-center">
                            <el-button
                                type="primary"
                                size="small"
                                @click="publishModel">
                                发布模型
                            </el-button>
                          </div>
                        </div> -->
                    </div>
                </el-col>
            </el-row>
        </div>
        <mine-dialog
            :appendToBody="true"
            :dialogFormVisible="flag"
            :width="'600px'"
            :modalFlag="modalFlag"
            :title="title"
            :showClose="showClose"
            @close="close"
        >
            <parameterModal
                ref="parameterModal"
                v-if="assembly === '算法参数'"
                slot="option"
                :flag="flag"
                @close="close"
                :parameter="parameter"
                @submit="editParameterCallback"
            ></parameterModal>
        </mine-dialog>
    </div>
</template>

<script>
import { modalMixins } from "./mixins";
import selectDataList from "./selectDataList";
import newDataList from "./newDataList";
import showDataList from "./showDataList";
import modelResults from "./modelResults";
import parameterModal from "./components/parameterModal";
import request from "@/modules/index/utils/request";
import { classifyList } from "@/utils/common";
import _ from "lodash";
import qs from "qs";

export default {
    mixins: [modalMixins],
    components: {
        selectDataList,
        newDataList,
        showDataList,
        modelResults,
        parameterModal
    },
    data() {
        return {
            loading: false,
            actionType: "upload",
            hasSelectFile: false,
            actuveStep: 0,
            entrances: [
                {
                    title: "声音分类",
                    desc: "识别出一段音频是否包含某种类型的声音",
                    type: "voice_classify",
                    img: require("@/assets/img/声音分类.png")
                },
                {
                    title: "数据预测",
                    desc: "对结构化数据做出分类或数值预测",
                    type: "data_predict",
                    img: require("@/assets/img/数据预测.png")
                },
                {
                    title: "图像分类",
                    desc: "支持用多边形以及像素级标注训练数据",
                    type: "img_classify",
                    img: require("@/assets/img/图像分割.png")
                },
                {
                    title: "文本分类",
                    desc: "对一段文本智能解析，并对其进行分类",
                    type: "txt_classify",
                    img: require("@/assets/img/文本分类.png")
                },
                {
                    title: "物体检测",
                    desc: "识别一张图中的物体类型及其所在的位置",
                    type: "img_detection",
                    img: require("@/assets/img/物体检测.png")
                },
                {
                    title: "无监督学习",
                    desc: "对结构化数据进行聚类或关联规则分析",
                    type: "data_unsupervised",
                    img: require("@/assets/img/图像分类.png")
                }
            ],
            filesure: false,
            type: false,

            baseinfo: {
                id: "",
                projectName: "",
                projectDesc: "",
                projectType: "",
                isAvailable: 1
            },
            trainFormData: {
                id: "",
                fileId: "",
                fileName: "",
                targetColumn: "",
                variableName: [],
                algorithmName: "",
                algorithmClass: "",
                proportion: "",
                type: "",
                projectId: ""
            },
            materialFormData: {
                id: "",
                fileDesc: "",
                fileName: "",
                fileType: "",
                file: ""
            },
            rules: {
                projectName: [
                    {
                        required: true,
                        message: "项目名称不能为空",
                        trigger: "blur"
                    }
                ],
                projectDesc: [
                    {
                        required: true,
                        message: "项目描述不能为空",
                        trigger: "blur"
                    }
                ],
                materialSetName: [
                    {
                        required: true,
                        message: "素材名称不能为空",
                        trigger: "blur"
                    }
                ],
                materialSetDesc: [
                    {
                        required: true,
                        message: "素材描述不能为空",
                        trigger: "blur"
                    }
                ],
                trainLebal: [
                    {
                        required: true,
                        message: "请选择标签列",
                        trigger: "change"
                    }
                ]
            },
            trainRules: {
                fileName: [
                    {
                        required: false,
                        message: "数据集不能为空",
                        trigger: "blur"
                    }
                ],
                targetColumn: [
                    {
                        required: true,
                        message: "标签列不能为空",
                        trigger: "change"
                    },
                    { validator: this.validateTarget, trigger: "change" }
                ],
                variableName: [
                    {
                        required: false,
                        message: "自变量不能为空",
                        trigger: "change"
                    }
                    // { validator: this.validateVariable, trigger: 'change' }
                ],
                algorithmClass: [
                    {
                        required: true,
                        message: "模型类型不能为空",
                        trigger: "change"
                    }
                ],
                algorithmName: [
                    {
                        required: true,
                        message: "算法名称不能为空",
                        trigger: "change"
                    }
                ],
                proportion: [
                    {
                        required: true,
                        message: "训练集占比不能为空",
                        trigger: "change"
                    }
                ]
            },
            modelResults: [],
            viewFile: [],
            showViewFile: false,
            variableList: [],
            targetList: [],
            algorithmList: [],
            modelData: [],
            parameter: ""
        };
    },
    created: function() {
        let params = this.$router.currentRoute.params;
        if (params.data) {
            this.type = true;
            let record = params.data;
            this.baseinfo = {
                id: record.id,
                projectName: record.projectName,
                projectDesc: record.projectDesc,
                projectType: record.projectType,
                isAvailable: record.isAvailable
            };
            if (record.projectType === "data_predict") {
                this.trainRules.variableName[0].required = true;
            }

            if (
                record.projectType === "img_classify" ||
                record.projectType === "voice_classify"
            ) {
                this.trainRules.targetColumn[0].required = true;
            }
            if (params.isToModelResult) {
                this.actuveStep = 3;

                this.loadModelResults();
                // return;
            } else {
                this.setMaterialAndTask(record);
            }
        }
    },
    methods: {
        entrance(type) {
            this.type = type;
            this.baseinfo.projectType = type;
        },
        returnList() {
            this.$router.push("/prolist");
        },
        nextStep() {
            if (this.actuveStep != 5) this.actuveStep++;
        },
        async submitForm() {
            let baseinfo = this.baseinfo,
                _this = this;
            this.$refs.baseFrom.validate(valid => {
                if (valid) {
                    if (baseinfo.id) {
                        this.setPro();
                    }
                    _this.nextStep();
                } else {
                    return false;
                }
            });
        },
        async setMaterialAndTask(record) {
            let materialFormData = null;
            try {
                materialFormData = await this.loadMaterial();
            } catch (err) {
                materialFormData = null;
            }
            this.materialFormData = _.assignIn(
                this.materialFormData,
                materialFormData
            );

            // this.loadViewfile();
            let task = null;
            try {
                task = await this.loadTask();
            } catch (err) {
                task = null;
            }
            if (task && task.variableName) {
                task.variableName = task.variableName.split(",");
            }
            if (!task) {
                task = {};
                task["fileId"] = this.materialFormData.id;
                task["fileName"] = this.materialFormData.fileName;
                task["projectId"] = this.materialFormData.projectId;
            }
            this.trainFormData = _.assignIn(this.trainFormData, task);
            this.hasSelectFile = true;
            if (record.progressRate === "material") {
                this.actuveStep = 2;
            }
            if (record.progressRate === "train") {
                this.actuveStep = 2;
            }
            if (record.progressRate === "publish") {
                this.actuveStep = 3;
            }
        },
        async setPro() {
            this.baseinfo = await this.savePro();
        },
        savePro() {
            let form = { projectDesc: "", projectName: "", projectType: "" },
                baseinfo = this.baseinfo;
            form = _.assignWith(form, this.baseinfo);
            return new Promise((resolve, reject) => {
                request({
                    url: "/project", //接口
                    method: "post",
                    data: form
                })
                    .then(res => {
                        if (res.data.success) {
                            resolve(res.data.data);
                        } else {
                            this.$message.error(res.data.msg);
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        this.$message.error("项目保存失败！");
                        reject(err);
                    });
            });
        },
        saveData() {
            let form = null,
                materialFormData = this.materialFormData,
                ct = "",
                url = "",
                pa = {};
            pa.method = "post";
            if (materialFormData.file) {
                form = new FormData();
                form.append("File", materialFormData.file.raw);
                form.append("fileDesc", materialFormData.fileDesc);
                form.append("fileName", materialFormData.fileName);
                form.append("projectId", materialFormData.projectId);
                form.append("creater", this.$store.state.userName);
                pa.headers = { "Content-Type": "multipart/form-data" };
                pa.url = "/material-info/save-and-upload";
            } else {
                form = {
                    fileDesc: "",
                    fileName: "",
                    fileType: "",
                    projectId: "",
                    fileId: ""
                };
                form = _.assignWith(form, materialFormData);
                form.id = form.fileId;
                pa.url = "/material-info/save";
            }
            pa.data = form;
            return new Promise((resolve, reject) => {
                request(pa)
                    .then(res => {
                        if (res.data.success) {
                            resolve(res.data.data);
                        } else {
                            this.$message.error("数据集保存失败！");
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        uploadFile(id) {
            let file = this.materialFormData.file;
            if (!file) {
                return;
            }
            let formData = new FormData();
            formData.append("File", this.materialFormData.file.raw);

            request({
                url: `material-info/upload/${id}`, //接口
                method: "post",
                data: formData,
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            }).then(response => {
                let result = response.data;
                if (!result.success) {
                    this.$message.error("上传失败！");
                    return;
                }
                this.$message.success("上传成功！");
            });
        },
        async saveProAndData() {
            this.loading = true;
            if (!this.materialFormData.id) {
                //pro
                let project = null;

                try {
                    project = await this.savePro();
                } catch (err) {
                    return;
                }
                this.baseinfo = project;
            }
            this.materialFormData.projectId = this.baseinfo.id;
            //material
            let data = null;

            try {
                data = await this.saveData();
            } catch (err) {
                return;
            }
            let dataId = data.id;
            // this.uploadFile(dataId);
            this.hasSelectFile = true;
            this.materialFormData.id = data.id;
            this.materialFormData.fileName = data.fileName;
            this.trainFormData.fileId = this.materialFormData.id;
            this.trainFormData.fileName = this.materialFormData.fileName;
            this.trainFormData.projectId = this.baseinfo.id;
            if (this.baseinfo.projectType === "data_predict") {
                this.trainRules.variableName[0].required = true;
            }
            if (
                this.baseinfo.projectType === "img_classify" ||
                this.baseinfo.projectType === "voice_classify"
            ) {
                this.trainRules.targetColumn[0].required = true;
            }
            this.loading = false;
            this.nextStep();
        },
        saveTraining() {
            let trainFormData = _.cloneDeep(this.trainFormData),
                _this = this;
            if (!trainFormData.id) {
                trainFormData = _.omit(trainFormData, ["id"]);
            }
            if (_.isArray(trainFormData.variableName)) {
                trainFormData.variableName = trainFormData.variableName.join(
                    ","
                );
            }
            this.$refs["traininfo"].validate(valid => {
                if (valid) {
                    if (!this.parameter) {
                        this.$message({
                            type: "warning",
                            message: "请填写算法参数"
                        });
                        return;
                    }
                    trainFormData.extraParam = this.parameter;
                    this.loading = true;
                    request({
                        url: `/traininginfo/training-info/create`, //接口
                        method: "post",
                        data: trainFormData
                    })
                        .then(response => {
                            this.loading = false;
                            let result = response.data;
                            if (!result.success) {
                                this.$message.error(result.msg);
                                return false;
                            }
                            // this.$message.success(result.msg);
                            _this.startTrain(result.data);
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });
        },
        startTrain(data) {
            request({
                url: `/traininginfo/training-info/${data.id}/startTask`, //接口
                method: "post"
            }).then(response => {
                let result = response.data;
                if (!result.success) {
                    this.$message.error(result.msg);
                    return false;
                }
                this.$message.success(result.msg);
                this.$router.push("/prolist");
            });
        },
        setDataRecord(record) {
            let materialFormData = {
                fileDesc: record.fileDesc,
                fileName: record.fileName,
                fileType: record.fileType,
                file: record.file,
                fileId: record.id,
                fileSize: record.fileSize
            };

            this.materialFormData = materialFormData;
            this.hasSelectFile = true;
        },

        async toRelease() {
            this.publishModel();
        },
        async loadModelResults() {
            let taskId = "";
            try {
                let task = await this.loadTask();
                if (task) {
                    taskId = task.id;
                }
            } catch (err) {
                return;
            }
            let modelData = [];
            try {
                modelData = await this.getModelData(taskId);
            } catch (err) {
                return;
            }
            let evaluate = eval("(" + modelData.evaluate + ")"),
                result = [];
            evaluate = _.forIn(evaluate, (value, key) => {
                let obj = {
                    name: key,
                    ...value
                };
                result.push(obj);
            });
            this.modelData = modelData;
            this.modelResults = result;
        },
        loadMaterial() {
            let data = {
                projectId: this.baseinfo.id
            };
            return new Promise((resolve, reject) => {
                request({
                    url: "/material-info/findByProjectId", //接口
                    method: "post",
                    params: data
                })
                    .then(res => {
                        if (res.data.success) {
                            if (res.data.data) {
                                resolve(res.data.data);
                            }
                            reject("没有数据");
                        } else {
                            this.$message.error("获取失败！");
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        loadTask() {
            let data = {
                projectId: this.baseinfo.id
            };
            return new Promise((resolve, reject) => {
                request({
                    url: "/traininginfo/training-info/getByProjectId", //接口
                    method: "get",
                    params: data
                })
                    .then(res => {
                        if (res.data.success) {
                            if (res.data.data) {
                                resolve(res.data.data);
                            }

                            // this.$message.error('获取失败！');
                            reject(res.data.msg);
                        } else {
                            this.$message.error("获取失败！");
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },

        getModelData(taskId) {
            return new Promise((resolve, reject) => {
                request({
                    url: `/training-model-data/find-by-training-task/${taskId}`, //接口
                    method: "get"
                })
                    .then(res => {
                        if (res.data.success) {
                            let re = res.data.data;
                            if (!re) {
                                reject("无返回数据");
                            }
                            resolve(re);
                        } else {
                            this.$message.error("数据集保存失败！");
                            reject(res.data.msg);
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },

        publishModel() {
            let modelData = _.cloneDeep(this.modelData);
            let info = {
                modelId: modelData.id,
                taskDesc: modelData.taskDesc || "",
                taskName: modelData.taskName || "",
                creater: this.$store.state.userName
            };
            request({
                url: "/publishtask/publish-task-data/publish", //接口
                method: "post",
                data: info
            })
                .then(res => {
                    if (res.data.success) {
                        this.$message.success("发布成功！");
                        this.$router.push({
                            path: "/prolist/prodetail",
                            query: { id: modelData.projectId }
                        });
                    } else {
                        this.$message.error("发布失败！:" + res.data.msg);
                    }
                })
                .catch(err => {
                    this.$message.error("发布失败！:" + err);
                });
        },
        loadViewfile() {
            let data = {
                fileId: this.materialFormData.id,
                encoding: "UTF-8"
            };
            return new Promise((resolve, reject) => {
                request({
                    url: "/material-info/viewfile", //接口
                    method: "get",
                    params: data
                })
                    .then(res => {
                        if (res.data.success) {
                            resolve(res.data.data || []);
                        } else {
                            this.$message.error(
                                "获取预览数据报错:" + res.data.msg
                            );
                        }
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        loadAlgorithm() {
            let projectType = this.baseinfo.projectType;
            this.algorithmList = [];
            request({
                url: "/classify/get-algorithm-by-type", //接口
                method: "get",
                params: { projectType: projectType }
            })
                .then(res => {
                    if (res.data.success) {
                        this.algorithmList = res.data.data;
                    } else {
                        this.algorithmList = [];
                        this.$message.error("无返回算法数据！");
                    }
                })
                .catch(err => {
                    this.algorithmList = [];

                    this.$message.error("获取算法数据失败！");
                });
        },
        changeAlgorithm(value) {
            let algorithmSelect = _.cloneDeep(this.algorithmSelect);
            let re = _.find(algorithmSelect, { algorithmName: value })
                ? _.find(algorithmSelect, { algorithmName: value })
                      .algorithmType
                : "";
            this.trainFormData.type = re;
        },
        validateTarget(rule, value, callback) {
            let variableNameList = this.trainFormData.variableName;
            if (variableNameList.length === 0) {
                callback();
            }
            let re = true;
            for (let i = 0, length = variableNameList.length; i < length; i++) {
                if (value === variableNameList[i]) {
                    re = false;
                }
            }
            if (!re) {
                callback(new Error("标签列值不能为自变量值中的一员"));
            }

            callback();
        },

        setShowViewFile() {
            this.setViewfile();
            this.showViewFile = true;
        },
        async setViewfile() {
            //material
            let viewFile = null;

            try {
                viewFile = await this.loadViewfile();
            } catch (err) {
                viewFile = [];
            }
            if (viewFile.length > 0) {
                this.variableList = viewFile[0];
                this.targetList = viewFile[0];
            } else {
                this.$message.error("获取数据集为空！");
            }
            this.viewFile = viewFile;
        },
        showText(value) {
            let result = value;
            result = _.truncate(value, { length: 40, separator: "..." });
            return result;
        },
        openParameter() {
            const { algorithmClass, algorithmName } = this.trainFormData;
            if (!algorithmClass || !algorithmName) {
                this.$message({
                    type: "warning",
                    message: "请选择模型类型和算法名称"
                });
                return;
            }
            this.flag = true;
            this.showClose = true;
            this.title = "算法参数";
            this.assembly = "算法参数";
            this.$nextTick(() => {
                this.$refs.parameterModal.show();
            });
        },
        editParameterCallback(value) {
            this.parameter = value;
        },
        setDefaultParameter() {
            if (this.algorithmList.length) {
                const { algorithmClass, algorithmName } = this.trainFormData;
                if (algorithmClass && algorithmName) {
                    const target = this.algorithmList.find(
                        item =>
                            item.algorithmClass === algorithmClass &&
                            item.algorithmName === algorithmName
                    );
                    if (target) {
                        this.parameter = target.parameter;
                    } else {
                        this.parameter = "";
                    }
                } else {
                    this.parameter = "";
                }
            } else {
                this.parameter = "";
            }
        }
    },
    computed: {
        classifies: function() {
            return classifyList;
        },
        vfTh: function() {
            let viewFile = _.cloneDeep(this.viewFile),
                result = [];
            if (!viewFile || viewFile.length === 0) {
                return result;
            }
            result = viewFile[0];
            return result;
        },
        vfData: function() {
            let viewFile = _.cloneDeep(this.viewFile),
                result = [];
            if (!viewFile || viewFile.length === 0 || viewFile.length === 1) {
                result = viewFile[0];
            }
            result = _.slice(viewFile, 1);
            return result;
        },
        algorithmClassList: function() {
            let algorithmList = _.cloneDeep(this.algorithmList),
                result = [];
            if (algorithmList.length === 0) {
                return result;
            }
            result = _.keys(_.groupBy(algorithmList, "algorithmClass"));
            return result;
        },
        algorithmSelect: function() {
            let algorithmList = _.cloneDeep(this.algorithmList),
                result = [],
                algorithmClass = this.trainFormData.algorithmClass;
            if (algorithmList.length === 0) {
                return result;
            }
            if (!algorithmClass) {
                return result;
            }
            result = _.filter(algorithmList, {
                algorithmClass: algorithmClass
            });
            return result;
        },
        variablefilterList: function() {
            let result = [],
                variableList = this.variableList,
                targetColumn = this.trainFormData.targetColumn;
            result = _.filter(variableList, value => {
                return value !== targetColumn;
            });
            return result;
        }
    },
    watch: {
        algorithmList: function(newValue, oldValue) {
            if (newValue.length === 0) {
                return;
            }
            if (this.trainFormData.id) {
                this.trainFormData.algorithmClass = _.find(newValue, {
                    algorithmType: this.trainFormData.type
                }).algorithmClass;
            }
        },
        actuveStep: function(newValue, oldValue) {
            if (newValue == 2) {
                this.loadAlgorithm();
            }
        },
        "trainFormData.algorithmClass"(newValue) {
            this.setDefaultParameter();
        },
        "trainFormData.algorithmName"(newValue) {
            this.setDefaultParameter();
        }
    }
};
</script>

<style lang="scss" scoped>
.entrances {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 160px);
    grid-row-gap: 16px;
    grid-column-gap: 16px;
    margin-bottom: 16px;
}

.entrance {
    padding: 0 40px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 6px;
    transition: 0.3s;
    overflow: hidden;
    box-shadow: 0 16px 12px -13px rgba(30, 30, 31, 0.06);
    @media (max-width: 1366px) {
        padding: 0 10px;
    }

    &:hover {
        box-shadow: 0px 0 20px #85899159;
        transform: translateY(-3px);
    }

    .entrance-icon {
        display: block;
        width: 92px;
        margin-right: 20px;
    }

    .entrance-text {
        .entrance-title {
            margin-bottom: 12px;
            font-size: 18px;
            line-height: 24px;
            color: #36383c;
            font-weight: bold;
        }

        .entrance-desc {
            margin-bottom: 20px;
            line-height: 20px;
            // height: 40px;
            font-size: 14px;
            color: #656b71;
        }

        .video-icon {
            display: inline-block;
            width: 18px;
            margin-left: 5px;
            cursor: pointer;
        }

        .link {
            font-size: 14px;
            color: #36383c;
            transition: 0.3s;
            cursor: pointer;

            &:hover {
                color: #4180f5;

                .link-arrow {
                    margin-left: 8px;
                }
            }

            .link-arrow {
                transition: 0.3s;
                margin-left: 5px;
            }
        }
    }
}

// .steps{
//   &>.el-step{
//      margin-top: 8px;
//      &>>>div.el-step__main{
//        margin-top: 98px;
//      }
//   }
// }
.step-content {
    text-align: center;
    width: 80%;
    margin: auto;

    .el-radio-group {
        margin-bottom: 10px;
    }
}

.el-form {
    width: 80%;
    margin: auto;
}

.text-align-center {
    text-align: center;
}
</style>
<style lang="scss">
.upload-demo {
    position: relative;

    & > .el-upload {
        position: relative;
        width: 100%;
    }

    margin: 20px 0px 10px 0px;
}

.el-upload-dragger {
    position: relative;
    width: 100%;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.form-input {
    width: auto;
    margin-right: 10px;

    input {
        padding: 0px 30px 0px 12px;
    }
}

table.table-text {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border: solid 1px #ccc;
    margin: 7px 0px;

    thead tr {
        background-color: rgba(204, 204, 204, 0.5);

        th {
            font-size: 13px;
            line-height: 20px;
            color: #000;
            letter-spacing: 0.07px;
            font-weight: normal;
            border: solid 1px #ccc;

            & > div {
                padding: 0.4rem 0.3rem;
            }

            &.padding-left {
                width: 0.8rem;
                box-sizing: border-box;
            }
        }
    }

    tbody tr {
        td {
            font-size: 13px;
            // white-space: nowrap;
            word-break: break-all;
            word-wrap: break-word;
            box-sizing: border-box;
            line-height: 20px;
            letter-spacing: 0.07px;
            font-weight: normal;
            border: solid 1px #ccc;

            & > div {
                padding: 0.4rem 0.3rem;

                & > div {
                    padding: 0.2rem 0rem;
                }
            }
        }

        &.padding-left {
            width: 0.8rem;
            box-sizing: border-box;
        }
    }
}

.cursor-pointer {
    cursor: pointer;
}
</style>
